<template>
    <div ref="chart" class="water-level-chart"></div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Watch ,Prop} from 'vue-property-decorator';
  import * as echarts from 'echarts';
  import 'echarts/lib/component/tooltip';
  import 'echarts/lib/component/dataZoom';
  
  interface ChartData {
    time: string;
    value: number;
  }
  
  @Component
  export default class WaterLevelChart extends Vue {
    @Prop() data!: ChartData[];
    private chart: echarts.ECharts | null = null;
  
    mounted() {
      this.initChart();
      window.addEventListener('resize', this.handleResize);
  
    }
  
    private initChart() {
      this.chart = echarts.init(this.$refs.chart as HTMLElement);
      this.updateChart();
    }
  
    @Watch('data', { deep: true })
    private updateChart() {
      if (!this.chart) return;
  
      const option: echarts.EChartsOption = {
        tooltip: {
          trigger: 'axis',
          formatter: (params: any) => {
            const data = params[0];
            return `
              <strong>${data.name}</strong><br/>
              水位: ${data.value} 米<br/>
              状态: ${this.getStatusText(data.value)}
            `;
          }
        },
        xAxis: {
          type: 'category',
          data: this.data.map(d => d.time),
          axisLabel: {
            color: '#606266'
          }
        },
        yAxis: {
          type: 'value',
          name: '水位（米）',
          nameTextStyle: {
            color: '#909399'
          },
          axisLabel: {
            color: '#606266'
          },
          splitLine: {
            lineStyle: {
              color: '#ebeef5'
            }
          }
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }],
        series: [{
          name: '水位',
          type: 'line',
          data: this.data.map(d => d.value),
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#409EFF'
          },
          lineStyle: {
            width: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(64, 158, 255, 0.6)' },
              { offset: 1, color: 'rgba(64, 158, 255, 0.02)' }
            ])
          }
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        }
      };
  
      this.chart.setOption(option);
    }
  
    private getStatusText(value: number): string {
      if (value > 8) return '危险';
      if (value > 6) return '警戒';
      return '正常';
    }
  
    private handleResize() {
      this.chart?.resize();
    }
  
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
      this.chart?.dispose();
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .water-level-chart {
    padding: 0 !important;
    height:100vh;
  
    // 适配Element UI主题
    ::v-deep .echarts-tooltip {
      background: #fff !important;
      border: 1px solid #ebeef5 !important;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) !important;
      color: #606266 !important;
      
      strong {
        color: #303133;
      }
    }
  }
  </style>